<template>
<div class="">
    <p>
        <span class="tit1">机构设施和服务商数趋势图</span>
    </p>
    <div ref="chart3" class='top20' style="width: 100%; height: 300px" />
</div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
    components: {},
    props: {},
    data() {
        return {
            chartData: {
                data1: [
                    ['product', '机构设施', '服务商数'],
                    ['2014年', 65, 82],
                    ['2015年', 43, 93],
                    ['2016年', 83, 55],
                    ['2017年', 86, 82],
                    ['2018年', 20, 20],
                ]
            }
        }
    },
    computed: {},
    watch: {

    },
    created() {
        const t = this;

    },
    mounted() {
        const t = this;
        t.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart3, 'macarons')
            this.setOptions()
        },
        setOptions() {
            const t = this;
            this.chart.setOption({
                color: ['#FFAE38','#FF5B50', '#56D756','#C38DFF','#4E7FE6'],
                grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '3%',
                    containLabel: true
                },
                color: ['#4E7FE6','#FFAE38'],
                legend: {},
                tooltip: {},
                dataset: {
                    source: t.chartData.data1
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{
                        type: 'bar',
                        barWidth: 20
                    },
                    {
                        type: 'bar',
                        barWidth: 20
                    }
                ]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
